<template>
    <div>
        <van-tabs v-model="active">
            <div v-for="item in brotherCategory" :key="item.id">
                <van-tab :title="item.name">
                    <h2>{{ item.name }}</h2>
                    <p>{{ item.front_name }}</p>
                </van-tab>
            </div>
        </van-tabs>
        <products :goodsList="goodsList"/>
    </div>
</template>

<script>
import {getChannel, getGoodsList} from '@/api/home';
import Products from "@/components/Products";

export default {
    name: "Channel",
    components: {Products},
    data() {
        return {
            active: "",
            brotherCategory: [],
            currentCategory: "",
            goodsList: [],
            goodsId: "",
        }
    },
    mounted() {
        getChannel({
            id: this.$route.query.id
        }).then(({data}) => {
            this.brotherCategory = data.brotherCategory;
            this.currentCategory = data.currentCategory;

            this.brotherCategory.map((item, index) => {

            })


        });
        getGoodsList({
            categoryId: this.$route.query.id,
            size: 100
        }).then(({data}) => {
            console.log(data);
            this.goodsList = data.data;
        })
    },
    watch: {
        active(val) {
            getGoodsList({
                categoryId: this.brotherCategory[val].id,
                page: 1,
                size: 1000,
            }).then(({data}) => {
                this.goodsList = data.data;

            });

        }
    },
}
</script>

<style scoped lang="less">
h2 {
    font-size: 20px;
    text-align: center;
    margin: 10px;
}

p {
    text-align: center;
    color: #696161;
    margin-bottom: 10px;
}
</style>
